<template>
    <div>
        <!-- 模糊查询表单  -->
        <el-form :inline="true" :model="UserSearch" class="demo-form-inline" style="height: 50px">
            <el-form-item label="用户昵称">
                <el-input v-model="UserSearch.usermonicker" placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号">
                <el-input
                        v-model="UserSearch.phone"
                        placeholder="用户手机号">
                </el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="initUserTable">查询</el-button>
                <el-button type="primary" @click="reback">重置</el-button>
            </el-form-item>
        </el-form>


        <!-- 用户表格  -->
        <el-table
                :data="userTable"
                border
                style="width: 100%"
                :header-cell-style="getRowClass">

            <el-table-column
                    prop="userid"
                    label="用户编号"

            >
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户账号"
            >
            </el-table-column>
            <el-table-column
                    prop="usermonicker"
                    label="用户昵称"
            >
            </el-table-column>
            <el-table-column
                    prop="rolename"
                    label="用户角色">
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="用户电话">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="400"
            >
                <template slot-scope="scope">
                    <el-button type="success" @click="edit(scope.row)"   size="medium">修改信息</el-button>
                    <el-button type="danger" @click="del(scope.row.userid)"   size="medium">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--   用户编辑的弹出层-->
        <el-dialog
                title="编辑信息"
                :visible.sync="editDialogVisible"
                width="50%"
        >

            <el-form :model="editForm" ref="ruleForm"  :rules="addRules" label-width="80px" class="demo-ruleForm">
                <el-form-item label="用户昵称" label-width="70px" prop="usermonicker">
                    <el-input v-model="editForm.usermonicker" placeholder="请填写昵称"></el-input>
                </el-form-item>
                <el-form-item label="用户角色" label-width="70px" prop="rolename">
                    <el-input v-model="editForm.rolename" placeholder="请填写角色"></el-input>
                </el-form-item>
                <el-form-item label="用户电话" label-width="70px" prop="phone">
                    <el-input v-model="editForm.phone" placeholder="请填写电话"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEdit">确 定</el-button>
            </span>
        </el-dialog>

        <!--分页组件 -->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>



        <!--删除按钮的弹出层-->
        <el-dialog
                title="提示"
                :visible.sync="delDialogVisible"
                width="350px"
        >

            <span>确认删除吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="queren">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "User",
        data(){
         return{

             //删除按钮传来的id
             delId:"",
             //删除弹出层
             delDialogVisible:false,

             //当前显示的页码变量
             currentPage:1,
             pageSizes:[5,10,15],
             pageSize:5,
             //总条数
             total:0,

             //模糊查询表单
             UserSearch:{},
             //用户表单
             userTable:[],
             //编辑弹出层
             editDialogVisible:false,
             //修改用户表单
             editForm:{},
         }
        },
        created() {
            this.initUserTable();
        },
        methods:{
            // 表头样式
            getRowClass() {
                return "background:#4841C1; color:#fff;";
            },
            //确认删除按钮
            queren(){
                var shanid=this.delId;
                this.shan(shanid);
            },

            //删除按钮触发的事件
            del(id){
                this.delDialogVisible=true;
                this.delId=id;
            },
            //删除按钮触发的事件
            shan(id){
                this.$http.post("/user/user/del?id="+id).then(result=>{
                    this.initUserTable();
                    this.delDialogVisible=false;
                })
            },

            //点击编辑按钮事件
            edit(row){
                this.editDialogVisible=true;
                this.editForm=row;
            },
            //提交编辑表单事件
            confirmEdit(){
                this.$http.post("/user/user/edit",this.editForm).then(result=>{
                    this.editDialogVisible=false;
                    this.initUserTable();
                })
            },

            //清空模糊查询表单
            reback(){
                this.UserSearch={};
                this.initUserTable();
            },

            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.initUserTable();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initUserTable();
            },
            //查询所有用户
            initUserTable(){
                //如果传递参数为json格式，那么必须为post提交
                this.$http.post("/user/user/selectAllUser?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.UserSearch).then(result=>{
                    this.userTable=result.data.data.records
                    this.total = result.data.data.total;
                });
            },
        }
    }
</script>

<style scoped>

</style>